<template>
  <div class="cases-page">
    <NavBar />
    
    <!-- 页面标题 - 简化版本 -->
    <section 
      class="page-header py-24 relative overflow-hidden"
      style="
        background: linear-gradient(135deg, #2563eb, #1d4ed8);
        color: white;
        /* 使用更明显的网格线和更大的网格间距 */
        background-image: 
          linear-gradient(135deg, #2563eb, #1d4ed8),
          linear-gradient(rgba(255, 255, 255, 0.3) 2px, transparent 2px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.3) 2px, transparent 2px);
        background-size: 100% 100%, 40px 40px, 40px 40px;
      "
      title="蓝色渐变背景带有白色网格线"
    >
      <!-- 简化的装饰元素 -->
      <div class="absolute top-0 left-0 w-full h-full overflow-hidden">
        <div class="absolute -top-20 -left-20 w-80 h-80 rounded-full bg-white/10 blur-3xl"></div>
        <div class="absolute bottom-20 right-20 w-96 h-96 rounded-full bg-white/10 blur-3xl"></div>
      </div>
      <div class="container mx-auto px-4 text-center relative z-10">
        <h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold mb-6 tracking-tight animate-fade-in-up">
          {{ $t('nav.cases') }}
        </h1>
        <p class="text-[clamp(1rem,2vw,1.5rem)] max-w-3xl mx-auto opacity-90 animate-fade-in-up delay-100">
          我们的成功案例展示
        </p>
        <!-- 滚动指示 -->
        <div class="mt-12 animate-bounce">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 mx-auto opacity-80" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
          </svg>
        </div>
      </div>
    </section>

    <!-- 案例分类 -->
    <section class="case-categories py-12 bg-white/95 backdrop-blur-md sticky top-0 z-20 shadow-sm border-b border-blue-100/50">
      <div class="container mx-auto px-4">
        <div class="overflow-x-auto scrollbar-hide">
            <div class="flex space-x-3 pb-4 min-w-max">
              <button 
                v-for="category in categories" 
                :key="category.id"
                @click="activeCategory = category.id"
                class="px-5 py-2.5 rounded-full transition-all duration-300 transform hover:-translate-y-0.5 border"
                :class="activeCategory === category.id 
                  ? 'bg-blue-600 text-white shadow ring-2 ring-blue-300 border-transparent'
                  : 'bg-white text-text-primary hover:bg-gray-50 border-gray-200'"
                :aria-pressed="activeCategory === category.id"
              >
                <span :class="activeCategory === category.id ? 'group-hover:translate-x-1 transition-transform duration-300' : 'transition-transform duration-300'">
                  {{ category.name }}
                </span>
              </button>
            </div>
          </div>
      </div>
    </section>

    <!-- 案例列表 -->
    <section class="cases-list py-16 bg-gradient-to-b from-blue-50/20 via-white to-indigo-50/20 relative" ref="casesListRef">
      <!-- 装饰元素 -->
      <div class="absolute top-40 right-0 w-96 h-96 rounded-full bg-primary-blue/5 blur-3xl"></div>
      <div class="absolute bottom-40 left-0 w-96 h-96 rounded-full bg-primary-blue/5 blur-3xl"></div>
      
      <div class="container mx-auto px-4">
        <div class="text-center mb-12 opacity-0 transform translate-y-8 transition-all duration-700" ref="casesTitleRef">
          <div class="w-24 h-1 bg-gradient-to-r from-primary-blue to-indigo-600 mx-auto mb-6 rounded-full"></div>
          <h2 class="text-3xl md:text-4xl font-bold mb-4 text-gray-900">
            {{ activeCategory === 0 ? '全部案例' : categories.find(c => c.id === activeCategory)?.name }}
          </h2>
          <p class="text-text-secondary max-w-2xl mx-auto">
            {{ activeCategory === 0 ? '探索我们在各个行业的成功应用' : `查看${categories.find(c => c.id === activeCategory)?.name}解决方案` }}
          </p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 lg:gap-8">
          <div 
            v-for="(caseItem, index) in filteredCases" 
            :key="caseItem.id"
            class="case-card bg-white rounded-2xl shadow-sm overflow-hidden border border-gray-100 hover:shadow-lg transition-all duration-500 transform hover:-translate-y-2 opacity-0 translate-y-8 relative"
            :ref="el => caseRefs[index] = el as HTMLElement"
          >
            <!-- 顶部装饰条 -->
            <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-primary-blue to-indigo-600"></div>
            <div class="case-image h-48 bg-gradient-to-br from-primary-blue/5 to-indigo-50 border border-transparent flex items-center justify-center relative overflow-hidden group">
                <!-- 装饰光点 -->
                <div class="absolute top-1/4 left-1/4 w-20 h-20 rounded-full bg-primary-blue/10 blur-xl group-hover:opacity-70 group-hover:scale-125 transition-all duration-700"></div>
                <div class="absolute bottom-1/3 right-1/3 w-24 h-24 rounded-full bg-indigo-400/10 blur-xl group-hover:opacity-70 group-hover:scale-125 transition-all duration-700"></div>
                
                <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                <div class="text-gray-900 text-lg font-semibold px-4 text-center z-10 group-hover:text-blue-700 transition-colors duration-300 group-hover:scale-105">
                  {{ caseItem.title }}
                </div>
              </div>
            <div class="p-6">
              <div class="flex justify-between items-start mb-3">
                <h3 class="text-xl font-bold text-gray-900 group-hover:text-blue-700 transition-colors duration-300">{{ caseItem.title }}</h3>
                <span class="bg-blue-50 text-blue-600 px-3 py-1 rounded-full text-xs transition-all duration-300 group-hover:bg-blue-600 group-hover:text-white">{{ caseItem.category }}</span>
              </div>
              <p class="text-text-secondary mb-5 line-clamp-3 leading-relaxed">{{ caseItem.description }}</p>
              <div class="case-tags flex flex-wrap gap-2 mb-6">
                <span 
                  v-for="(tag, i) in caseItem.tags" 
                  :key="i"
                  class="bg-gray-100 text-gray-600 px-3 py-1 rounded-full text-xs hover:bg-blue-50 hover:text-blue-600 transition-all duration-300 group-hover:transform group-hover:-translate-y-0.5"
                >
                  {{ tag }}
                </span>
              </div>
              <el-button 
                type="primary" 
                class="w-full py-3 bg-gradient-to-r from-primary-blue to-indigo-600 hover:from-primary-blue-dark hover:to-indigo-700 transition-all duration-500 shadow-sm hover:shadow-lg flex items-center justify-center gap-2 group"
                @click="$router.push('/products')"
              >
                查看详情
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transform group-hover:translate-x-1 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
                </svg>
              </el-button>
            </div>
          </div>
        </div>
        
        
      </div>
    </section>

    <!-- 客户评价 -->
    <section class="client-testimonials py-24 bg-white" ref="testimonialsRef">
      <div class="container mx-auto px-4">
        <div class="flex flex-col items-center mb-20 opacity-0 transform translate-y-8 transition-all duration-700" ref="testimonialsTitleRef">
          <div class="w-24 h-1 bg-gradient-to-r from-primary-blue to-indigo-600 mb-6 rounded-full"></div>
          <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-700">客户评价</h2>
          <p class="text-text-secondary max-w-2xl text-center">听听我们的客户怎么说</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6 lg:gap-8">
          <div 
              v-for="(testimonial, index) in testimonials" 
              :key="index"
              class="testimonial-card bg-bg-gray p-8 rounded-xl shadow-sm hover:shadow-lg transition-all duration-700 transform hover:-translate-y-2 opacity-0 translate-y-10 relative group overflow-hidden"
              :ref="el => testimonialRefs[index] = el as HTMLElement"
            >
              <!-- 背景装饰元素 -->
              <div class="absolute inset-0 bg-gradient-to-br from-primary-blue/5 to-transparent opacity-0 group-hover:opacity-100 transition-all duration-700"></div>
            <!-- 引用符号装饰 -->
            <div class="absolute top-6 right-6 text-6xl font-serif text-primary-blue/10 transform transition-transform duration-500 group-hover:scale-125">
              "
            </div>
            
            <div class="flex items-center mb-6">
              <div class="client-avatar bg-primary-blue/10 text-primary-blue w-14 h-14 rounded-full flex items-center justify-center mr-4 text-xl font-bold group-hover:bg-gradient-to-r group-hover:from-primary-blue group-hover:to-indigo-600 group-hover:text-white transition-all duration-500 transform group-hover:scale-110">
                {{ testimonial.client.charAt(0) }}
              </div>
              <div>
                <h4 class="font-bold text-text-primary group-hover:text-primary-blue transition-colors duration-300">{{ testimonial.client }}</h4>
                <p class="text-sm text-text-secondary">{{ testimonial.position }}</p>
              </div>
            </div>
            <p class="text-text-secondary italic leading-relaxed mb-6 relative z-10 group-hover:text-gray-700 transition-colors duration-300">"{{ testimonial.content }}"</p>
            <div class="flex text-yellow-400">
              <svg v-for="star in 5" :key="star" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
              </svg>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 合作客户 -->
    <section class="cooperation-clients py-24 bg-gradient-to-b from-bg-gray to-white" ref="clientsRef">
      <div class="container mx-auto px-4">
        <div class="flex flex-col items-center mb-20 opacity-0 transform translate-y-8 transition-all duration-700" ref="clientsTitleRef">
          <div class="w-24 h-1 bg-gradient-to-r from-primary-blue to-indigo-600 mb-6 rounded-full"></div>
          <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-700">合作客户</h2>
          <p class="text-text-secondary max-w-2xl text-center">我们与众多知名企业建立了长期合作关系</p>
        </div>
        
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 md:gap-4 lg:gap-6">
          <div 
              v-for="(client, index) in clients" 
              :key="index"
              class="client-logo bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md transition-all duration-700 transform hover:-translate-y-2 opacity-0 translate-y-10 group relative overflow-hidden hover:bg-gradient-to-r hover:from-blue-50 hover:to-indigo-100"
              :ref="el => clientRefs[index] = el as HTMLElement"
            >
              <!-- 装饰元素 -->
              <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-primary-blue to-indigo-600"></div>
              <div class="absolute inset-0 bg-gradient-to-br from-primary-blue/5 to-transparent opacity-0 group-hover:opacity-100 transition-all duration-700"></div>
              
              <div class="text-center">
                <div class="text-primary-blue font-bold group-hover:text-indigo-600 transition-all duration-300 transform group-hover:scale-110">
                  {{ client }}
                </div>
              </div>
            </div>
        </div>
      </div>
    </section>

    <Footer />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import NavBar from '@/components/NavBar.vue'
import Footer from '@/components/Footer.vue'
import { ElButton, ElPagination } from 'element-plus'

// 滚动监听相关引用
const casesListRef = ref<HTMLElement>()
const casesTitleRef = ref<HTMLElement>()
const caseRefs = ref<HTMLElement[]>([])
const testimonialsRef = ref<HTMLElement>()
const testimonialsTitleRef = ref<HTMLElement>()
const testimonialRefs = ref<HTMLElement[]>([])
const clientsRef = ref<HTMLElement>()
const clientsTitleRef = ref<HTMLElement>()
const clientRefs = ref<HTMLElement[]>([])

// 检测元素是否在视口中
const isInViewport = (element: HTMLElement | undefined) => {
  if (!element) return false
  const rect = element.getBoundingClientRect()
  return (
    rect.top <= window.innerHeight * 0.8 &&
    rect.bottom >= 0
  )
}

// 监听滚动，触发动画
  const animateOnScroll = () => {
    // 案例列表部分动画
    if (casesTitleRef.value && isInViewport(casesTitleRef.value)) {
      casesTitleRef.value.style.opacity = '1'
      casesTitleRef.value.style.transform = 'translateY(0)'
      casesTitleRef.value.style.transition = 'opacity 0.7s ease, transform 0.7s ease'
    }
    
    caseRefs.value.forEach((caseItem, index) => {
      if (caseItem && isInViewport(caseItem)) {
        setTimeout(() => {
          caseItem.style.opacity = '1'
          caseItem.style.transform = 'translateY(0)'
          caseItem.style.transition = `opacity 0.7s ease, transform 0.7s ease`
        }, 100 + index * 100)
      }
    })
    
    // 客户评价部分动画
    if (testimonialsTitleRef.value && isInViewport(testimonialsTitleRef.value)) {
      testimonialsTitleRef.value.style.opacity = '1'
      testimonialsTitleRef.value.style.transform = 'translateY(0)'
      testimonialsTitleRef.value.style.transition = 'opacity 0.7s ease, transform 0.7s ease'
    }
    
    testimonialRefs.value.forEach((testimonial, index) => {
      if (testimonial && isInViewport(testimonial)) {
        setTimeout(() => {
          testimonial.style.opacity = '1'
          testimonial.style.transform = 'translateY(0)'
          testimonial.style.transition = `opacity 0.7s ease, transform 0.7s ease`
        }, 100 + index * 150)
      }
    })
    
    // 合作客户部分动画
    if (clientsTitleRef.value && isInViewport(clientsTitleRef.value)) {
      clientsTitleRef.value.style.opacity = '1'
      clientsTitleRef.value.style.transform = 'translateY(0)'
      clientsTitleRef.value.style.transition = 'opacity 0.7s ease, transform 0.7s ease'
    }
    
    clientRefs.value.forEach((client, index) => {
      if (client && isInViewport(client)) {
        setTimeout(() => {
          client.style.opacity = '1'
          client.style.transform = 'translateY(0)'
          client.style.transition = `opacity 0.7s ease, transform 0.7s ease`
        }, 50 + index * 50)
      }
    })
  }

// 案例分类数据
const categories = [
  { id: 0, name: '全部案例' },
  { id: 1, name: '电子行业' },
  { id: 2, name: '汽车行业' },
  { id: 3, name: '医疗行业' },
  { id: 4, name: '建筑行业' },
  { id: 5, name: '航空航天' }
]

// 案例数据
const cases = [
  {
    id: 1,
    title: '某大型电子企业PCB板粘接解决方案',
    category: '电子行业',
    categoryId: 1,
    description: '为客户提供高性能环氧树脂胶，解决了PCB板元器件固定和防水密封问题，提高了产品可靠性。',
    tags: ['PCB板', '元器件固定', '防水密封', '环氧树脂胶']
  },
  {
    id: 2,
    title: '汽车零部件结构粘接项目',
    category: '汽车行业',
    categoryId: 2,
    description: '使用高强度结构胶替代传统机械连接方式，减轻了车身重量，提高了生产效率和结构强度。',
    tags: ['汽车零部件', '结构粘接', '轻量化', '高强度']
  },
  {
    id: 3,
    title: '医疗设备密封与粘接解决方案',
    category: '医疗行业',
    categoryId: 3,
    description: '提供符合医疗级标准的UV胶和环氧树脂胶，用于医疗器械部件的密封和粘接，满足生物相容性要求。',
    tags: ['医疗器械', '密封', '生物相容性', 'UV胶']
  },
  {
    id: 4,
    title: '建筑幕墙结构胶应用案例',
    category: '建筑行业',
    categoryId: 4,
    description: '使用高性能硅酮结构胶，为大型商业建筑幕墙提供可靠的结构粘接和密封解决方案。',
    tags: ['建筑幕墙', '结构胶', '密封', '耐候性']
  },
  {
    id: 5,
    title: '航空复合材料粘接项目',
    category: '航空航天',
    categoryId: 5,
    description: '为航空部件制造商提供高性能复合材料专用胶粘剂，满足轻量化和高强度要求。',
    tags: ['航空航天', '复合材料', '轻量化', '耐高温']
  },
  {
    id: 6,
    title: '新能源电池组件密封解决方案',
    category: '电子行业',
    categoryId: 1,
    description: '使用导热型环氧树脂胶，解决了新能源电池组件的散热和密封问题，提高了电池安全性。',
    tags: ['新能源', '电池组件', '导热', '密封']
  },
  {
    id: 7,
    title: '汽车内饰件粘接解决方案',
    category: '汽车行业',
    categoryId: 2,
    description: '提供环保型热熔胶和瞬干胶，用于汽车内饰件的快速粘接，满足VOC排放要求。',
    tags: ['汽车内饰', '环保', '快速粘接', '低VOC']
  },
  {
    id: 8,
    title: '光学仪器组件精密粘接案例',
    category: '电子行业',
    categoryId: 1,
    description: '使用高精度UV胶，实现了光学仪器组件的无应力精密粘接，保证了光学性能。',
    tags: ['光学仪器', '精密粘接', 'UV胶', '无应力']
  },
  {
    id: 9,
    title: '轨道交通车辆部件粘接项目',
    category: '汽车行业',
    categoryId: 2,
    description: '为轨道交通车辆提供阻燃型结构胶，满足高速列车部件的阻燃和结构强度要求。',
    tags: ['轨道交通', '阻燃', '结构强度', '高速列车']
  }
]

// 客户评价数据
const testimonials = [
  {
    client: '张先生',
    position: '某电子科技公司采购经理',
    content: '晶鸿泰科技的工业胶水产品质量稳定，服务专业，为我们解决了生产中的关键问题。'
  },
  {
    client: '李女士',
    position: '某汽车零部件制造商技术总监',
    content: '合作多年来，晶鸿泰科技始终提供优质的产品和技术支持，是我们值得信赖的合作伙伴。'
  },
  {
    client: '王经理',
    position: '某医疗器械公司研发主管',
    content: '晶鸿泰的医疗级胶水产品符合国际标准，为我们的产品质量提供了有力保障。'
  }
]

// 合作客户数据
const clients = [
  '华为技术',
  '比亚迪',
  '富士康',
  '大疆创新',
  '迈瑞医疗',
  '中兴通讯',
  'TCL科技',
  '创维集团',
  '格力电器',
  '美的集团',
  '海信集团',
  '宁德时代'
]

// 响应式数据
const activeCategory = ref(0)
const currentPage = ref(1)
const pageSize = ref(6)

// 计算属性：过滤后的案例列表
const filteredCases = computed(() => {
  if (activeCategory.value === 0) {
    return cases
  }
  return cases.filter(caseItem => caseItem.categoryId === activeCategory.value)
})

// 监听分类变化，重置页码并重新触发动画
watch(activeCategory, () => {
  currentPage.value = 1
  setTimeout(() => {
    resetCaseAnimations()
    animateOnScroll()
  }, 100)
})

// 监听页码变化，重新触发动画
watch(currentPage, () => {
  resetCaseAnimations()
  setTimeout(() => {
    animateOnScroll()
  }, 100)
})

// 重置案例卡片动画
const resetCaseAnimations = () => {
  caseRefs.value.forEach(caseItem => {
    if (caseItem) {
      caseItem.style.opacity = '0'
      caseItem.style.transform = 'translateY(20px)'
      caseItem.style.transition = 'opacity 0.7s ease, transform 0.7s ease'
    }
  })
}

onMounted(() => {
  // 初始化所有元素的过渡样式
  caseRefs.value.forEach(caseItem => {
    if (caseItem) {
      caseItem.style.transition = 'opacity 0.7s ease, transform 0.7s ease'
    }
  })
  
  testimonialRefs.value.forEach(testimonial => {
    if (testimonial) {
      testimonial.style.transition = 'opacity 0.7s ease, transform 0.7s ease'
    }
  })
  
  clientRefs.value.forEach(client => {
    if (client) {
      client.style.transition = 'opacity 0.7s ease, transform 0.7s ease'
    }
  })
  
  // 初始触发一次
  setTimeout(animateOnScroll, 100)
  
  // 监听滚动事件
  window.addEventListener('scroll', animateOnScroll)
})

onUnmounted(() => {
  // 移除滚动事件监听
  window.removeEventListener('scroll', animateOnScroll)
})
</script>

<style scoped>
.cases-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 分页样式优化 */
.pagination-style :deep(.el-pagination__sizes) {
  margin-right: 16px;
}

.pagination-style {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.pagination-style :deep(.el-pagination) {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
}

.pagination-style :deep(.el-pagination__total),
.pagination-style :deep(.el-pagination__jump) {
  white-space: nowrap;
}

.pagination-style :deep(.el-pagination__total),
.pagination-style :deep(.el-pagination__sizes),
.pagination-style :deep(.el-pagination__jump) {
  display: inline-flex;
  align-items: center;
}

.pagination-style :deep(.el-pagination__sizes .el-select) {
  display: inline-flex;
}

.pagination-style :deep(.el-pagination__jump .el-input) {
  width: auto;
}

.pagination-style :deep(.el-select .el-input__wrapper) {
  box-shadow: none !important;
  border: 1px solid #e5e7eb; /* gray-200 */
  border-radius: 8px;
}

.pagination-style :deep(.el-pager) {
  display: inline-flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagination-style :deep(.el-pager li) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
}

.pagination-style :deep(.el-pagination .btn-prev),
.pagination-style :deep(.el-pagination .btn-next) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
}

.pagination-style :deep(.el-pagination button:disabled) {
  opacity: 0.5;
}

.pagination-style :deep(ul),
.pagination-style :deep(li) {
  list-style: none;
}

.pagination-style :deep(.el-input__inner) {
  padding-right: 24px !important;
}

.pagination-style :deep(.el-pagination__prev.is-disabled),
.pagination-style :deep(.el-pagination__next.is-disabled) {
  opacity: 0.5;
}

.pagination-style :deep(.el-pagination__page.is-active) {
  background-color: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

.pagination-style :deep(.el-pagination .btn-prev),
.pagination-style :deep(.el-pagination .btn-next),
.pagination-style :deep(.el-pager li) {
  min-width: 32px;
  height: 32px;
  line-height: 32px;
}

.pagination-style :deep(.el-pager li) {
  border-radius: 8px;
}

.pagination-style :deep(.el-pagination__total),
.pagination-style :deep(.el-pagination__jump),
.pagination-style :deep(.el-pagination__sizes .el-select .el-input__wrapper) {
  color: #374151; /* gray-700 */
}

/* 动画类 */
.animate-fade-in-up {
  animation: fadeInUp 0.8s ease forwards;
}

.animate-bounce {
  animation: bounce 2s infinite;
}

.delay-100 {
  animation-delay: 0.1s;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -8px, 0);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -4px, 0);
  }
  90% {
    transform: translate3d(0, -2px, 0);
  }
}

/* 网格装饰 */
.bg-grid-white {
  background-image: linear-gradient(#ffffff 1px, transparent 1px),
                    linear-gradient(to right, #ffffff 1px, transparent 1px);
  background-size: 20px 20px;
}

/* 网格装饰带蓝色背景 */
.bg-grid-white-blue {
  background-color: rgba(59, 130, 246, 0.1); /* bg-blue-500/10 的实际颜色值 */
  background-image: linear-gradient(#ffffff 1px, transparent 1px),
                    linear-gradient(to right, #ffffff 1px, transparent 1px);
  background-size: 20px 20px;
}

/* 缓慢脉冲动画 */
.animate-pulse-slow {
  animation: pulse 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-pulse-slow-delay {
  animation: pulse 6s cubic-bezier(0.4, 0, 0.6, 1) 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
</style>